<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <style>
        /*斗篷样式*/
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>

<div id="app" style="margin-bottom: 200px">
<!--    胡子语法-->
    <h3>{{text}}</h3>
<!--    v-model双向绑定-->
    <input v-model="text">
    <h3>v-pre : 用于显示原本的Mustache语法，也就是不解析vue的胡子语法。</h3>
    <div>{{text}}</div>
    <div v-pre>{{text}}</div>

    <h3> v-html : 会将string的HTML解析出来并且进行渲染</h3>
    <div>{{text1}}</div>
    <div v-html="text1"></div>

    <h3> v-once : 该指令表示元素和组件，只渲染一次不会随着数据改变</h3>
    <div>{{text}}</div>
    <div v-once>{{text}}</div>

    <h3> v-cloak : 对未编译的Mustache标签进行定义</h3>
    <div>未加斗篷 : {{text}}</div>
    <div v-cloak> 加了斗篷 : {{text}}</div>
</div>


<script>
    // 延迟2秒执行
    window.setTimeout(()=> {
        // 创建vue 对象
        var v = new Vue({
            el : "#app",   //将该vue对象绑定到 app
            data : {       // 数据模型 json
                text : "vue框架"
            }
        });
    }, 2000); //测试斗篷效果时，请求该时间设置成 2000

</script>
</body>
</html>